<section class="oe_container">
  <div class="oe_row oe_spaced">
    <div class="oe_span12">
      <h2 class="oe_slogan" style="color:#875A7B;">POS Orders History</h2>
      <h3 class="oe_slogan">Track all paid orders from special menu in POS</h3>
    </div>
  </div>
</section>

<section class="oe_container">
  <div class="oe_row oe_spaced">
    <div class="oe_span12">
      <p class="oe_mt32">
	<div class="alert alert-info" style="padding:0.3em 0.6em; font-size: 150%;">
	  <i class="fa fa-hand-o-right"></i><b> Key features: </b>
	  <ul class="list-unstyled">
	    <li>
	      <i class="fa fa-check-square-o text-primary"></i>
	      See all paid orders and their details
	    </li>
	    <li>
	      <i class="fa fa-check-square-o text-primary"></i>
	      Ability to activate the displaying of cancelled &amp; posted orders
	    </li>
	    <li>
	      <i class="fa fa-check-square-o text-primary"></i>
	      Display order barcode on payment receipt if needed
	    </li>
	  </ul>
	</div>
      </p>		
    </div>
  </div>
</section>

<section class="oe_container oe_dark">
  <div class="oe_row oe_spaced">
    <h3 class="oe_slogan">How It Works</h3>
    <h4 class="oe_slogan">Orders History</h4>
    <div class="oe_span12 text-center">
      <p class="oe_mt32">
 	<font style="font-size: 120%;">
	  Open POS session. Here you can see new <b>History</b> button.
	</font>
      </p>		
    </div>
    <div class="oe_screenshot" align="center">
      <img style="max-width: 80%" src="pos_history_button.png"/>
    </div>
  </div>
</section>

<br/>

<section class="oe_container">
  <div class="oe_row oe_spaced">
    <div class="oe_span12 text-center">
      <p class="oe_mt32">
 	<font style="font-size: 120%;">
	  Once the button is clicked, all paid orders are shown in tree view. You can use the filters to be able to easily find the orders needed.
	</font>
      </p>		
    </div>
    <div class="oe_screenshot" align="center">
      <img style="max-width: 80%" src="pos_paid_orders.png"/>
    </div>
    <p class="oe_mt32 text-center">
 	<font style="font-size: 120%;">
	  To see the details, click on order item.
	</font>
      </p>
    <div class="oe_screenshot" align="center">
      <img style="max-width: 80%" src="pos_paid_order_details.png"/>
    </div>
  </div>
</section>

<br/>

<section class="oe_container">
  <div class="oe_row oe_spaced">
    <h4 class="oe_slogan">Barcode on Receipt (optional)</h4>
    <div class="oe_span12 text-center">
      <p class="oe_mt32">
 	<font style="font-size: 120%;">
	  You are able to activate the displaying of order barcode on payment receipt. It will allow you to search an order from the list by scanning the barcode. Usually, it is widely used for refund process - see our <a href="https://apps.odoo.com/apps/modules/10.0/pos_orders_history_return" target="_blank">POS Order Return</a> module for details.
	</font>
      </p>		
    </div>
    <div class="oe_screenshot" align="center">
      <img style="max-width: 80%" src="pos_receipt_barcode.png"/>
    </div>
  </div>
</section>

<br/>

<section class="oe_container oe_dark">
  <div class="oe_row oe_spaced">
    <h3 class="oe_slogan">Configuration</h3>
    <div class="oe_span12">
      <p class="oe_mt32">
 	<font style="font-size: 120%;">
	  Go to <em>Point of Sale &rarr; Configuration &rarr; Point of Sale</em> and open POS configuration form. See and manage new options:
	  <ul>
	    <li>
	      <b>Orders History</b> - to activate/deactivate <b>History</b> button
	    </li>
	    <li>
	      <b>Current Day Orders Only</b> - to display orders for current day only
	    </li>
	    <li>
	      <b>Show Cancelled Orders</b> - to display cancelled orders in addition to paid orders
	    </li>
	    <li>
	      <b>Show Posted Orders</b> - to display posted orders in addition to paid orders
	    </li>
	    <li>
	      <b>Show Barcode on Receipt</b> - to display the barcode on payment receipt 
	    </li>
	  </ul>
	</font>
      </p>		
    </div>
    <div class="oe_screenshot" align="center">
      <img style="max-width: 80%" src="pos_orders_history_config.png?1"/>
    </div>
  </div>
</section>

<br/>

<section class="oe_container">
    <div class="oe_row oe_spaced">
        <div class="oe_span8">
            <h2>Need our service?</h2>
            <p class="oe_mt32">Contact us by <a href="mailto:pos@it-projects.info">email</a> or fill out <a href="https://www.it-projects.info/page/website.contactus " target="_blank">request form</a></p>
            <ul>
                <li><a href="mailto:pos@it-projects.info">pos@it-projects.info <i class="fa fa-envelope-o"></i></a></li>
                <li><a href="https://www.it-projects.info/page/website.contactus " target="_blank">https://www.it-projects.info/page/website.contactus <i class="fa fa-list-alt"></i></a></li>
            </ul>
        </div>
        <div class="oe_span4">
            <div class="stamp" style="width:200px;">
                <div style="margin-top: 15px;
                            position: relative;
                            font-family:'Vollkorn', serif;
                            font-size: 16px;
                            line-height: 25px;
                            text-transform: uppercase;
                            font-weight: bold;
                            color: #75526b;
                            border: 3px dashed #75526b;
                            float: left;
                            padding: 4px 12px;
                            -webkit-transform: rotate(-6deg);
                            -o-transform: rotate(-6deg);
                            -moz-transform: rotate(-6deg);
                            -ms-transform: rotate(-6deg);">
                    Tested on Odoo<br/>10.0 community
                </div>
                <div style="margin-top: 15px;
                            position: relative;
                            font-family:'Vollkorn', serif;
                            font-size: 16px;
                            line-height: 25px;
                            text-transform: uppercase;
                            font-weight: bold;
                            color: #75526b;
                            border: 3px dashed #75526b;
                            float: left;
                            padding: 4px 12px;
                            -webkit-transform: rotate(-7deg);
                            -o-transform: rotate(-7deg);
                            -moz-transform: rotate(-7deg);
                            -ms-transform: rotate(-7deg);">
                    Tested on Odoo<br/>10.0 enterprise
                </div>
            </div>
        </div>
    </div>
</section>
